<template>
	<div class="w-full h-full flex flex-col overflow-y-auto relative">
		<div class="flex items-center flex-start py-4 px-4 sticky top-0 mb-2.5 bg-white z-10">
			<el-icon @click="goBack" class="cursor-pointer" color="var(--el-color-primary)" :size="25">
				<Back />
			</el-icon>
			<span @click="goBack" class="text-2xl cursor-pointer" style="color: var(--el-color-primary)">返回</span>
			<span style="border-left: 2px #dcdfe6 solid" class="text-2xl ml-3 pl-3">{{ props.title }}</span>
		</div>
		<div class="content">
			<slot name="default"></slot>
		</div>
		<div class="buttons" v-show="props.buttonData.length > 0">
			<el-button plain :class="item.class || null" @click="item.click" v-for="item in props.buttonData" :key="item.name">{{ item.name }}</el-button>
		</div>
	</div>
</template>
<script setup lang="ts">
const props: any = defineProps({
	title: {
		type: String,
		default: '标题',
	},
	buttonData: {
		type: Array,
		default: () => [],
	},
});
const router = useRouter();
const goBack = () => {
	window.history.length > 1 ? router.go(-1) : router.push('/');
};
</script>
<style scoped lang="scss">
.buttons {
	margin-top: 10px;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	flex-grow: 0;
	background-color: #fff;
}
.content {
	height: calc(100% - 25px);
	overflow-y: auto;
	flex-grow: 1;
}
</style>
